<template>
    <div class="wotui">
        <ul class="spList">
                <li>
                    <img src="../../assets/img/首页/个人中心/德国奶粉.png" alt="">
                    <div class="inner">
                        <h1>新老版本随机发货德国爱他美1段3罐装0-6个月8</h1>
                        <span>24H发货</span>
                        <div class="price">
                            <div class="r-price">
                                <span>￥39</span>/份
                            </div>
                            <img src="../../assets/img/首页/首页内容/蓝色购物车.png" alt="">
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../../assets/img/首页/个人中心/童年时光.png" alt="">
                    <div class="inner">
                        <h1>童年时光inne全脑DHA小金豆藻油 40粒*4 含钙</h1>
                        <span>24H发货</span>
                        <div class="price">
                            <div class="r-price">
                                <span>￥39</span>/份
                            </div>
                            <img src="../../assets/img/首页/首页内容/蓝色购物车.png" alt="">
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../../assets/img/首页/购物车/女士香水.png" alt="">
                    <div class="inner">
                        <h1>2件加购Malizia/玛莉吉亚男士私处护理液200ml</h1>
                        <span>24H发货</span>
                        <div class="price">
                            <div class="r-price">
                                <span>￥39</span>/份
                            </div>
                            <img src="../../assets/img/首页/首页内容/蓝色购物车.png" alt="">
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../../assets/img/首页/购物车/男士护理.png" alt="">
                    <div class="inner">
                        <h1>2件加购Malizia/玛莉吉亚男士私处护理液200ml</h1>
                        <span>24H发货</span>
                        <div class="price">
                            <div class="r-price">
                                <span>￥39</span>/份
                            </div>
                            <img src="../../assets/img/首页/首页内容/蓝色购物车.png" alt="">
                        </div>
                    </div>
                </li>
            </ul>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.wotui{
    .spList {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            li {
                margin: 5px 3px;
                width: 48%;
                background-color: #fff;
                border-radius: 0px;
                overflow: hidden;
                >img {
                    width: 100%;
                }

                .inner {
                    width: 90%;
                    margin: 0 auto;

                    h1 {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        margin-bottom: 10px;
                    }

                    >span {
                        color: #2FA2CF;
                        border: 1px solid #2FA2CF;
                        font-size: 14px;
                    }

                    .price {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 10px 0;

                        .r-price {
                            color: #E0E0E0;
                            font-size: 14px;

                            span {
                                color: #F6592C;
                                font-weight: 700;
                            }
                        }

                        img {
                            width: 25px;
                        }
                    }
                }

            }
        }
}
</style>